<template>
  <div class="listwrapper">
    <div>
      <ListRated />
      <!-- 应当是在mivies组件的数据渲染完毕之后再添加bs -->
      <ListMovies @addbs="addbs" ref="child" @refresh="refresh" />

      <p v-if="noMore" class="nomore">没有更多了</p>
    </div>
  </div>
</template>

<script>
import ListRated from "./components/ListRated.vue";
import ListMovies from "./components/ListMovies.vue";
import BScroll from "better-scroll";

let bs;
export default {
  data() {
    return {
      noMore: false,
    };
  },
  components: {
    ListRated,
    ListMovies,
  },
  methods: {
    addbs() {
      bs = new BScroll(".listwrapper", {
        scrollX: false,
        scrollY: true,
        // 让原先的点击事件有效
        click: true,
        // 开启上拉加载的功能
        pullUpLoad: true,
      });

      // 监听拉到底的动作
      bs.on("pullingUp", () => {
        // console.log("页面拉到底了");

        // 可以给组件添加ref，用this.$refs.xxx的方式可以直接拿到子组件的实例
        // 拿到子组件实例以后就可以去拿到子组件实例下的属性和方法了
        this.$refs.child.getMore();
      });
    },
    refresh(done) {
      // done表示是否已经全部接收完了

      // 重新计算高度
      bs.refresh();
      // 每次触发 pullingUp 钩子后，你应该主动调用 finishPullUp() 告诉 BetterScroll 准备好下一次的 pullingUp 钩子。
      if (done) {
        bs.finishPullUp();
      } else {
        this.noMore = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.listwrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nomore {
  font-size: @m-font;
  text-align: center;
  margin: 10px 0;
}
</style>
